import * as React from "react"
import { Text, View, ViewStyle, Image, ImageStyle, TextStyle, TouchableOpacity } from "react-native"
import { Modal, Provider } from "@ant-design/react-native"
import { px2dp } from "@/utils"
import { color } from "@/theme"
import { icons } from "../../assets/index"

export interface BottomPopUpProps {
  titleText?: any // 标题
  isOpne: boolean // 开关状态，
  changeOpenClick: any // 改变当前开关状态
}

export interface BottomPopUpState {}

const styleContent: ViewStyle = {
  backgroundColor: color.background,
  paddingBottom: px2dp(40),
  borderTopLeftRadius: px2dp(8),
  borderTopRightRadius: px2dp(8)
}

const styleHeaderView: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center",
  flex: 1,
  height: px2dp(68),
  paddingLeft: px2dp(10),
  borderBottomWidth: px2dp(1),
  borderBottomColor: color.popUpBottomLine
}

const styleBackImg: ImageStyle = {
  width: px2dp(26),
  height: px2dp(26)
}

const styleTitle: TextStyle = {
  color: color.storybookTextColor,
  fontSize: px2dp(16),
  fontWeight: "400",
  textAlign: "center",
  flex: 1,
  marginRight: px2dp(26)
}

const styleView: ViewStyle = {}

/**
 * 底部弹出框
 */
export class BottomPopUp extends React.Component<BottomPopUpProps, BottomPopUpState> {
  state = {
    visible: false
  }

  static defaultProps = {
    titleText: "标题"
  }

  private onClose = () => {
    this.props.changeOpenClick(false)
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      visible: newProps.isOpne
    })
  }

  public render() {
    return (
      <Provider>
        <Modal
          popup
          style={styleContent}
          visible={this.state.visible}
          animationType="slide-up"
          onClose={this.onClose}
        >
          <View style={styleHeaderView}>
            <TouchableOpacity onPress={this.onClose}>
              <Image style={styleBackImg} source={icons.backLocation} />
            </TouchableOpacity>
            <Text style={styleTitle}>{this.props.titleText}</Text>
          </View>
          <View style={styleView}>{this.props.children}</View>
        </Modal>
      </Provider>
    )
  }
}
